<template>
  <div class="div">
    <div class="div1">
      <que :queList="queList" :butFlag="!but" @query="query" :refundData="refundData" @reason="reason"
           @refresh="refresh"/>
    </div>
    <Tables :items="items" :butFlag="butFlag" :list="list" :loading="loading" :high="high" @refund="refund"
    />
    <el-col :md="{span: 5, offset: 6}" :lg="{span: 4, offset: 10}">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="pagesize"
        :current-page="page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-col>
  </div>
</template>
<script>
  import Tables from '../components/Tabs.vue'
  import axios from 'axios'
  import Que from '../components/Que.vue'
  import moment from 'moment'
  import {mapState} from 'vuex'

  export default {
    name: 'BranchInfo',
    components: {
      Que,
      Tables
    },
    data() {
      return {
        page: 1,
        pagesize: 20,
        total: 0,
        list: [],
        but: true,
        high: 0,
        loading: false,
        queList: [
          {
            width: '3',
            name: '订单号',
            prop: 'orderNo',
            i1: '0'
          },
          {
            width: '3',
            name: '交易时间',
            prop: 'transactionDate1',
            i2: '0'
          },
          {
            width: '3',
            name: '交易时间',
            prop: 'transactionDate2',
            i2: '0'
          }],
        items: [
          {
            prop: 'orderNo',
            label: '订单号'
          },
          {
            prop: 'merchantOrderNo',
            label: '商户订单号'
          },
          {
            prop: 'transactionDate',
            label: '交易时间',
            meth: function (row, column) {
              var date = row[column.property]
              if (date === null) {
                return date
              } else {
                return moment(date).format('YYYY-MM-DD HH:mm:ss')
              }
            }
          },
          {
            prop: 'openId',
            label: '用户标识'
          },
          {
            prop: 'orderName',
            label: '商品名称'
          },
          {
            prop: 'transactionType',
            label: '交易类型',
            meth: function (row, column) {
              var type = row[column.property]
              switch (type) {
                case "0001":
                  type = "充值"
                  break
                case "0002":
                  type = "消费"
                  break
              }
              return type
            }
          },
          {
            prop: 'transactionStatus',
            label: '交易状态',
            meth: function (row, column) {
              var state = row[column.property]
              switch (state) {
                case "0":
                  state = "待付款"
                  break
                case "1":
                  state = "已支付"
                  break
                case "2":
                  state = "已取消"
                  break
              }
              return state
            }
          },
          {
            prop: 'payType',
            label: '支付类型',
            meth: function (row, column) {
              var state = row[column.property]
              switch (state) {
                case "0001":
                  state = "互联网账户"
                  break
                case "0002":
                  state = "支付宝"
                  break
                case "0003":
                  state = "微信"
                  break
                case "0004":
                  state = "银行卡"
                  break
              }
              return state
            }
          },
          {
            prop: 'payTime',
            label: '支付时间',
            meth: function (row, column) {
              var date = row[column.property]
              if (date === null) {
                return date
              } else {
                return moment(date).format('YYYY-MM-DD HH:mm:ss')
              }
            }
          },
          {
            prop: 'dealNo',
            label: '交易流水号'
          },
          {
            prop: 'bank',
            label: '付款银行'
          },
          {
            prop: 'orderTotalAmount',
            label: '总金额'
          }
          // {
          //   prop: 'account',
          //   label: '优惠金额'
          // }
          // {
          //   prop: 'refundAmount',
          //   label: '退款金额'
          // },
          // {
          //   prop: 'refundAccount',
          //   label: '优惠退款金额'
          // },
          // {
          //   prop: 'refundType',
          //   label: '退款类型'
          // },
          // {
          //   prop: 'refundStatus',
          //   label: '退款状态',
          //   meth: function (row, column) {
          //     var state = row[column.property]
          //     switch (state) {
          //       case "SUCCESS":
          //         state = "退款成功"
          //         break
          //       case "9":
          //         state = "退款成功"
          //         break
          //       case "10":
          //         state = "对账成功"
          //         break
          //     }
          //     return state
          //   }
          // },
          // {
          //   prop: 'refundDate',
          //   label: '退款时间',
          //   meth: function (row, column) {
          //     var date = row[column.property]
          //     if (date === null) {
          //       return date
          //     } else {
          //       return moment(date).format('YYYY-MM-DD HH:mm:ss')
          //     }
          //   }
          // },
          // {
          //   prop: 'procedure',
          //   label: '手续费'
          // },
          // {
          //   prop: 'rate',
          //   label: '费率'
          // }
        ],
        orderNo: '',
        transactionDate1: '',
        transactionDate2: '',
        refundData: ''
      }
    },
    mounted() {
      this.get()
      this.high = window.innerHeight - 180
    },
    computed: {
      ...mapState({
        isLogin: state => state.eui.isLogin,
        username: state => state.eui.username
      })
    },
    created() {
      if (!sessionStorage.getItem('username')) {
        this.$router.replace('/')
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val
        this.get()
      },
      handleSizeChange(val) {
        this.pagesize = val
        this.get()
      },
      query(msg) {
        console.log(msg)
        this.orderNo = msg.orderNo
        if (msg.transactionDate1 === '' || msg.transactionDate1 === undefined) {
          this.transactionDate1 = msg.transactionDate1
        } else {
          this.transactionDate1 = new Date(msg.transactionDate1).getTime()
        }
        if (msg.transactionDate2 === '' || msg.transactionDate2 === undefined) {
          this.transactionDate2 = msg.transactionDate2
        } else {
          this.transactionDate2 = new Date(msg.transactionDate2).getTime()
        }
        this.page = 1
        this.get()
      },
      get() {
        this.loading = true
        axios({
          method: 'get',
          url: `${this.BASE_URL}/payOrder/get`,
          responseType: 'json',
          params: {
            page: this.page,
            pagesize: this.pagesize,
            orderNo: this.orderNo,
            transactionDate1: this.transactionDate1,
            transactionDate2: this.transactionDate2
          }
        }).then((response) => {
          this.list = []
          if (response.data.statuCode === '0') {
            this.total = response.data.total
            response.data.data.forEach((item) => {
              this.list.push(item)
              this.loading = false
            })
          } else {
            this.loading = false
            this.total = response.data.total
            this.$alert('没有相关内容', '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      },
      refund(msg) {
        this.refundData = msg
      },
      reason(msg) {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/payOrder/refund`,
          responseType: 'json',
          params: {
            page: this.page,
            pagesize: this.pagesize,
            orderNo: this.refundData.orderNo,
            reason: msg
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.list = []
            this.total = response.data.total
            response.data.data.forEach((item) => {
              this.list.push(item)
              this.loading = false
            })
            this.$alert('已发起退款', '提示', {
              confirmButtonText: '确定'
            })
          } else {
            this.loading = false
            this.total = response.data.total
            this.$alert('退款失败', '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      },
      refresh(msg) {
//        this.updateDate = new Date(msg).getTime()
        axios({
          method: 'get',
          url: `${this.BASE_URL}/payOrder/refresh`,
          responseType: 'json',
          params: {
            updateDate: new Date(msg).getTime()
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.$alert('已完成更新账单更新', '提示', {
              confirmButtonText: '确定'
            })
          } else {
            this.loading = false
            this.total = response.data.total
            this.$alert('该日期都已对账', '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
</script>
<style scoped>
  .div {
    /*margin-top: 10px;*/
  }

  .div1 {
    width: 100%;
    height: 50px;
    padding-top: 10px;
  }

  .el-select-dropdown__item {
    height: auto;
  }
</style>
